<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎登陆！</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/bootstrap-3.4.1/js/jquery.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="Bootstrap/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <style>
        body{
            font-family: "微软雅黑";
            background: url("img/1.jpg") no-repeat;
            background-attachment: fixed;
            background-size: cover;
            color: white;
            text-align: center;
        }

        .box{
            position: absolute;
            top:50%;
            margin-top: -200px;
            left: 50%;
            margin-left: -200px;
            border:1px solid black;
            width: 400px;
            height: 400px;         ;
            background-color: #00000068;
            border-radius: 10px;
            box-shadow: 10px 10px 10px 10px rgba(0,0,0, .3);
        }
        .but{
            width: 40%;
            background-image: linear-gradient(120deg,#f6d365 0%,#fda085 100%);
            border-radius: 40px;
            border: 0px;
            font-size: 20px;
            color: white;
        }
        .but:hover{
            background-image:linear-gradient(to right,#b4731d 0%,#f16943 100%);
        }
        .box1{
            margin-top: 75px;
        }
        .box2{
            margin-top: 50px;
        }
        .box3{
            margin-top: 50px;
        }
        .box4{
            margin-top: 50px;
        }
        a{
            text-decoration: none;
        }
        .form-control{
            background-color: rgba(255,255,255,0);
            width: 60%;
            border: 0px;
            border-bottom: 2px solid silver;
            outline: none;
            color: white;
        }

    </style>
</head>
<body>
<<div class="box">
        <form class="form-horizontal col-sm-offset-3 col-md-offset-3" action="/project1_war/homeUserLoginServlet"
              method="post">
            <h1 class="form-title">登录</h1>
                <div class="box1">
                    用户名：
                    <input class="form-control" type="text" name="homeuserName" id="homeuserName" placeholder="请输入用户名"
                           required
                           autofocus>
                </div>
                <div class="box2">
                    密码：
                    <input class="form-control " type="password" name="homeuserPassword" id="homeuserPassword"
                           placeholder="请输入密码"
                           required>
                </div>
                <div class="box3">
                    <a href="/project1_war/HomeUserRegister.jsp">没有账号？立即注册</a>
                </div>
                <div class="box4">
                    <input type="submit" value="登录" class="but"></a>
                    <a href="/project1_war/HomePage.jsp"><input type="button" value="返回" class="but"></a>
                </div>
        </form>
</body>
</html>
